import React from 'react';
import { WeaFormItem, WeaInput } from 'ecCom';
import { WeaLocaleProvider, WeaDialog } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

// 元素标题
class ETitle extends React.Component {
    state = {
        title: `${getLabel(523389, '元素参数信息')}`,
        visible: false,
        value: this.props.value,
    };

    render() {
        const { title, visible } = this.state;
        const { hasLink = true, hpid, eid, ebaseid, styleid, subCompanyId } = this.props;

        return (
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@jytibd`} label={getLabel(19491, '元素标题')} labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
                <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@t8sa1k`} id={`element_title_name_input_${this.props.eid}`} inputType="multilang" isBase64={true} value={this.state.value} onChange={value => this.setState({ value })} />
                {hasLink && <i className="icon-coms-link portal-esetting-content-title-icon" title={getLabel(16208, '链接地址')} onClick={() => window.open(`/spa/portal/element/index.html#/main/portal/element?eid=${this.props.eid}`)} />}
                <i className="icon-coms-help portal-esetting-content-title-paraminfo" style={hasLink ? {} : { right: '-24px' }} title={getLabel(523389, '元素参数信息')} onClick={() => { this.setState({ visible: true }); }} />
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@v8jdll`}
                  onCancel={() => this.setState({ visible: false })}
                  title={title}
                  visible={visible}
                  style={{ width: 300, height: 170 }}
                  hasScroll
                  icon="icon-coms-bottom-floor"
                  iconBgcolor="#1a57a0"
                >
                    <div className="portal-esetting-content-title-paraminfo-dialog">
                        <div className="portal-esetting-paraminfo-dialog-list"><span>eid:</span>{eid}</div>
                        <div className="portal-esetting-paraminfo-dialog-list"><span>hpid:</span>{hpid}</div>
                        <div className="portal-esetting-paraminfo-dialog-list"><span>subCompanyId:</span>{subCompanyId}</div>
                        {/* <div className='portal-esetting-paraminfo-dialog-list'><span>styleid:</span>{styleid}</div> */}
                        <div className="portal-esetting-paraminfo-dialog-list"><span>ebaseid:</span>{ebaseid}</div>
                    </div>
                </WeaDialog>
            </WeaFormItem>
        );
    }
    getSaveValues() {
        return this.state.value;
    }
}

export default ETitle;
